<template>
	<view>
		<view class="user">
			<view class="user-icon">
				<uni-icons type="person-filled" size="30" color="#fff" />
			</view>
			<view class="user-login">
				<uni-list :border="false">
					<uni-list-item :show-extra-icon="false" title="未登录" note="点击登录">
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="user_function">
			<uni-grid :column="4" :show-border="false" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in menu" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons :type="item.url" :size="30" color="#777" />
						<text class="text">{{ item.text }}</text> 
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="user_item">
			<uni-list :border="false">
				<uni-list-item v-for="(item, index) in list" :index="index" :key="index" :show-extra-icon="true"
					:extra-icon="item.icon" :title="item.title" showArrow clickable @click="onClick(item.title)">
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { menu, list } from "../../utils/userMenu"
	// import { ref, reactive } from 'vue';

	const onClick = (data : any) => {
		console.log(data, 111111);
		if (data == "我的账户") {
			uni.showToast({
				icon: "loading",
				title: '功能开发中，敬请期待！'
			});
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		height: 200rpx;
		background-color: #5cb27b;
		display: flex;

		.user-icon {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			.uni-icons {
				display: inline-block;
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #dcdce3;
				border: 2px solid #fff;
				border-radius: 50%;
			}
		}

		.user-login {
			flex: 4;
		}

		.uni-list,
		.uni-list-item {
			height: 100%;
			background-color: #5cb27b !important;
		}

		::v-deep .uni-list-item__container {
			padding-left: 0;
		}

		::v-deep .uni-list-item__content-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
		}

		::v-deep .uni-list-item__content-note {
			font-size: 24rpx;
			color: #eeb282;
		}
	}

	.user_function {
		padding: 10px 10px 5px;

		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
			// border-radius: 5px;
		}

		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}

		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	}

	.user_item {
		padding: 5px 10px 0;

		.uni-list {
			border-radius: 5px;
		}
	}
</style>